<template>
  <div>
    <div>
      <el-card class="box-card" style="margin-top: 10px">
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="时间范围:">
              <el-date-picker
                class="inputData"
                placeholder="选择日期"
                v-model="formInline.valuetimes"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="SP名称:">
              <el-input
                v-model="formInline.proName"
                placeholder="请输入SP名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="业务主管:">
              <el-input
                v-model="formInline.manageName"
                placeholder="请输入业务主管名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" round @click="onSubmit">重置</el-button> -->
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button type="success" @click="handleExport">下载</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="dataList"
          style="width: 100%; margin-top: 20px"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(12,42,98, 0.9)"
        >
          <!-- <el-table-column type="index" label="序号" align="center">
            </el-table-column> -->
          <el-table-column prop="intoTime" label="引入时间" align="center">
          </el-table-column>
          <el-table-column prop="proName" label="产品名称" align="center">
          </el-table-column>
          <el-table-column prop="company" label="合作单位" align="center">
          </el-table-column>
          <el-table-column prop="dept" label="引入部门" align="center">
          </el-table-column>
          <el-table-column
            prop="manageName"
            label="业务主管姓名"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="remind" label="是否提醒" align="center">
          </el-table-column>
          <el-table-column prop="sendNum" label="提醒次数" align="center">
          </el-table-column>
          <el-table-column
            prop="latelyRemind"
            label="最后一次提醒时间"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  style="color:rgb(222,225,230)"
                  @click="hanlleSearch(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  style="color:red"
                  @click="hanlleSearch(scope.row)"
                  >删除</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="hanlleSearch(scope.row)"
                  >嘟一下</el-button
                >
              </template>
            </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          :pageNum="pageNum"
          :pageSize="pageSize"
          @pageChange="pageChange"
        />
      </el-card>
    </div>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      loading: true,
      formInline: {
        user: "",
        region: "",
        valuetimes: [], //时间段，绑定的时间
        startTime: "", //开始时间
        endTime: "", //结束时间
        proName: "",
        manageName: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dataList: [],
    };
  },
  components: {},
  computed: {
    groupId: {
      get() {
        return this.$store.state.user.groupId;
      },
    },
    cityCode: {
      get() {
        return this.$store.state.user.cityId;
      },
      set(val) {
        this.$store.commit("user/updateCityCode", val);
      },
    },
  },
  activated() {
    this.getPerson();
  },
  created() {},
  watch: {},
  methods: {
    //人员配置列表
    getPerson() {
      this.loading = true;
      let startTime = "";
      let endTime = "";
      if (
        this.formInline.valuetimes !== "" &&
        this.formInline.valuetimes !== null
      ) {
        startTime = this.formInline.valuetimes[0];
        endTime = this.formInline.valuetimes[1];
      } else {
        startTime = "";
        endTime = "";
      }
      // console.log("startTime==", startTime + "----" + "endTime==", endTime);
      //列表(点击人员选择)
      this.$http({
        url: this.$http.adornUrl(`cp/remindReport`),
        method: "get",
        params: this.$http.adornParams({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          proName: this.formInline.proName,
          manageName: this.formInline.manageName,
          startTime,
          endTime,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          setTimeout(() => {
            this.loading = false;
            this.dataList = data.data.records;
            // this.dataList = [];
            this.total = data.data.total;
          }, 1000);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //查询
    onSearch() {
      this.pageNum = 1;
      this.getPerson();
    },

    // 分页（点击人员选择）
    pageChange(page) {
      console.log(page._pageSize);
      console.log(page._currentPage);
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.getPerson();
    },
    // 分页(分组列表)
    pageChangeG(page) {
      console.log(page._pageSize);
      console.log(page._currentPage);
      this.pageSizeG = page._pageSize;
      this.pageNumG = page._currentPage;
      this.getPersonG();
    },
    //导出
    handleExport() {
      let startTime = "";
      let endTime = "";
      if (
        this.formInline.valuetimes !== "" &&
        this.formInline.valuetimes !== null
      ) {
        startTime = this.formInline.valuetimes[0];
        endTime = this.formInline.valuetimes[1];
      } else {
        startTime = "";
        endTime = "";
      }
      this.isLoading = true;
      this.$http({
        url: this.$http.adornUrl("cp/cpExport"),
        method: "get",
        params: this.$http.adornParams({
          proName: this.formInline.proName,
          manageName: this.formInline.manageName,
          startTime,
          endTime,
        }),
        responseType: "blob",
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          let blob = res.data;
          const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
          fileReader.readAsDataURL(blob); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
          fileReader.onload = (event) => {
            // 处理load事件。该事件在读取操作完成时触发
            // 新建个下载的a标签，完成后移除。
            let a = document.createElement("a");
            let _fileName = "cpsp业务信息报表.xls";
            a.download = _fileName;
            a.href = event.target.result;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          };
        }
        // let headers = res.headers;
        // let blob = new Blob([res.data], { type: headers["content-type"] });
        // let link = document.createElement("a");
        // link.href = window.URL.createObjectURL(blob);
        // const fileName = decodeURI(headers["content-disposition"]);
        // // let title = fileName.includes('filename=') ? fileName.split('=')[1] : '下载的表单文件'
        // if (fileName.includes("filename=")) {
        //   let title = fileName.split("=")[1];
        //   link.download = title;
        //   link.click();
        //   this.isLoading = false;
        // } else {
        //   this.$message.error("下载出错");
        // }
      });
    },
  },
};
</script>
    
    <style scoped lang="scss">
.el-pagination {
  text-align: right;
}
/deep/ .el-range-editor--medium .el-range-input {
  background-color: transparent;
  color: white;
}
</style>